<template>
    <div class="container">
        <div class="handle-box">
            <el-row>&nbsp;&nbsp;&nbsp;
                <el-col :span="6">
                    <el-input v-model="renew.retail_licence_code" placeholder="请手动输入店铺号" ></el-input>
                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--                <el-col :span="3">-->
<!--                    <el-select v-model="renew.feature1"   clearable filterable placeholder="请选择特征1">-->
<!--                        <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>-->
<!--                        <el-option key="2" label="经营业态" value="经营业态"></el-option>-->
<!--                        <el-option key="3" label="连锁户" value="连锁户"></el-option>-->
<!--                        <el-option key="4" label="新办证户" value="新办证户"></el-option>-->
<!--                        <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>-->
<!--                        <el-option key="6" label="责令停业户" value="责令停业户"></el-option>-->
<!--                        <el-option key="7" label="申请停业户" value="申请停业户"></el-option>-->
<!--                        <el-option key="8" label="停业到期户" value="停业到期户"></el-option>-->
<!--                        <el-option key="9" label="许可证状态" value="许可证状态"></el-option>-->
<!--                        <el-option key="10" label="场地权属" value="场地权属"></el-option>-->
<!--                        <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>-->
<!--                        <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>-->
<!--                        <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>-->
<!--                        <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>-->
<!--                        <el-option key="15" label="涉案次数" value="涉案次数"></el-option>-->
<!--                        <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>-->
<!--                        <el-option key="17" label="地区类别" value="地区类别"></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <el-col :span="3">-->
<!--                    <el-select v-model="renew.feature2" clearable placeholder="请选择特征2" >-->
<!--                        <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>-->
<!--                        <el-option key="2" label="经营业态" value="经营业态"></el-option>-->
<!--                        <el-option key="3" label="连锁户" value="连锁户"></el-option>-->
<!--                        <el-option key="4" label="新办证户" value="新办证户"></el-option>-->
<!--                        <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>-->
<!--                        <el-option key="6" label="责令停业户" value="责令停业户"></el-option>-->
<!--                        <el-option key="7" label="申请停业户" value="申请停业户"></el-option>-->
<!--                        <el-option key="8" label="停业到期户" value="停业到期户"></el-option>-->
<!--                        <el-option key="9" label="许可证状态" value="许可证状态"></el-option>-->
<!--                        <el-option key="10" label="场地权属" value="场地权属"></el-option>-->
<!--                        <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>-->
<!--                        <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>-->
<!--                        <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>-->
<!--                        <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>-->
<!--                        <el-option key="15" label="涉案次数" value="涉案次数"></el-option>-->
<!--                        <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>-->
<!--                        <el-option key="17" label="地区类别" value="地区类别"></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <el-col :span="3">-->
<!--                    <el-select v-model="renew.feature3"  clearable placeholder="请选择特征3" >-->
<!--                        <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>-->
<!--                        <el-option key="2" label="经营业态" value="经营业态"></el-option>-->
<!--                        <el-option key="3" label="连锁户" value="连锁户"></el-option>-->
<!--                        <el-option key="4" label="新办证户" value="新办证户"></el-option>-->
<!--                        <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>-->
<!--                        <el-option key="6" label="责令停业户" value="责令停业户"></el-option>-->
<!--                        <el-option key="7" label="申请停业户" value="申请停业户"></el-option>-->
<!--                        <el-option key="8" label="停业到期户" value="停业到期户"></el-option>-->
<!--                        <el-option key="9" label="许可证状态" value="许可证状态"></el-option>-->
<!--                        <el-option key="10" label="场地权属" value="场地权属"></el-option>-->
<!--                        <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>-->
<!--                        <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>-->
<!--                        <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>-->
<!--                        <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>-->
<!--                        <el-option key="15" label="涉案次数" value="涉案次数"></el-option>-->
<!--                        <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>-->
<!--                        <el-option key="17" label="地区类别" value="地区类别"></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <el-col :span="3">-->
<!--                    <el-select v-model="renew.feature4" clearable placeholder="请选择特征4" >-->
<!--                        <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>-->
<!--                        <el-option key="2" label="经营业态" value="经营业态"></el-option>-->
<!--                        <el-option key="3" label="连锁户" value="连锁户"></el-option>-->
<!--                        <el-option key="4" label="新办证户" value="新办证户"></el-option>-->
<!--                        <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>-->
<!--                        <el-option key="6" label="责令停业户" value="责令停业户"></el-option>-->
<!--                        <el-option key="7" label="申请停业户" value="申请停业户"></el-option>-->
<!--                        <el-option key="8" label="停业到期户" value="停业到期户"></el-option>-->
<!--                        <el-option key="9" label="许可证状态" value="许可证状态"></el-option>-->
<!--                        <el-option key="10" label="场地权属" value="场地权属"></el-option>-->
<!--                        <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>-->
<!--                        <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>-->
<!--                        <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>-->
<!--                        <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>-->
<!--                        <el-option key="15" label="涉案次数" value="涉案次数"></el-option>-->
<!--                        <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>-->
<!--                        <el-option key="17" label="地区类别" value="地区类别"></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <el-col :span="3">-->
<!--                    <el-select v-model="renew.feature5" clearable placeholder="请选择特征5" >-->
<!--                        <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>-->
<!--                        <el-option key="2" label="经营业态" value="经营业态"></el-option>-->
<!--                        <el-option key="3" label="连锁户" value="连锁户"></el-option>-->
<!--                        <el-option key="4" label="新办证户" value="新办证户"></el-option>-->
<!--                        <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>-->
<!--                        <el-option key="6" label="责令停业户" value="责令停业户"></el-option>-->
<!--                        <el-option key="7" label="申请停业户" value="申请停业户"></el-option>-->
<!--                        <el-option key="8" label="停业到期户" value="停业到期户"></el-option>-->
<!--                        <el-option key="9" label="许可证状态" value="许可证状态"></el-option>-->
<!--                        <el-option key="10" label="场地权属" value="场地权属"></el-option>-->
<!--                        <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>-->
<!--                        <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>-->
<!--                        <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>-->
<!--                        <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>-->
<!--                        <el-option key="15" label="涉案次数" value="涉案次数"></el-option>-->
<!--                        <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>-->
<!--                        <el-option key="17" label="地区类别" value="地区类别"></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>&nbsp;&nbsp;&nbsp;&nbsp;-->
                <el-col :span="12">
                    <el-button type="primary" @click="renew_message" >更新</el-button>
                </el-col>
            </el-row>
        </div>

        <div class="chart-wrapper" style="width: 95%; height: 500px; padding:10px">
            <div id="chartContainer" style="width: 95%; height: 500px; padding:10px"></div>
        </div>
    </div>



</template>

<script >
import * as echarts from 'echarts';
import treeData from './tree.json';
import {
    send_feature
} from '../api/index';
export default {
    data() {
        return {
            treeData: treeData,
            loading: false,
            renew:{
                retail_licence_code:'',
                result:''
            }
        };
    },
    mounted() {
        this.renderChart();
    },
    methods: {
        renew_message(){
            send_feature(this.renew.retail_licence_code).then(res=>{
                this.renew.result=res.data.data;
                treeData.name=this.renew.result[0][0]
                treeData.children=this.renew.result[1]
                this.renderChart();
            })
        },
        renderChart() {
            const myChart = echarts.init(document.getElementById('chartContainer'));
            myChart.showLoading();
            myChart.hideLoading();
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: [treeData],
                        top: '1%',
                        left: '12%',
                        bottom: '1%',
                        right: '23%',
                        symbolSize:10,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left',
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 500,
                        animationDurationUpdate: 750
                    }
                ]
            });
        }

    }
};


</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-box button{
    background-color: #00a854;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}

:deep(.avatar){
    width: 100px;
    height: 100px;
}
.blue {
    color: rgba(0, 118, 252, 0.79);
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 500px;
    height: 500px;
}
.dialog-footer button{
    background-color: #00a854;
    color:white;
}


</style>